<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webview && javascript comunication demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
<body>

<input type="button"  value="注销" onclick="logout()"> <br><br>

<input type="button"  value="上传照片" onclick="uploadPhoto()"> <br><br>

<input type="button"  value="分享本页" onclick="share()"> <br><br>

<script>

    /** Bridge Core Start **/
    function setupWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

    setupWebViewJavascriptBridge(function(bridge) {
        //iOS初始化完毕
        window.JJMWebViewJavascriptBridgeIOS=bridge;
    });

    window.JJMWebViewJavascriptBridge={
        callNative:function (data) {
            var dataString=JSON.stringify(data);
            window.JJMWebViewJavascriptBridgeIOS.callHandler('call', dataString);
        }
    };
    /** Bridge Core End **/



    /** 下面是协议 + DEMO **/

    //注销
    function logout() {
        window.JJMWebViewJavascriptBridge.callNative({
            'action':'logout'
        });
    }

    //设置标题
    function setTitle() {
        window.JJMWebViewJavascriptBridge.callNative({
            'action':'setTitle',
            'title':'111111'
        });
    }

    //上传证件
    function uploadPhoto() {
        window.JJMWebViewJavascriptBridge.callNative({
            'action':'uploadPhoto',
            'callbackFunction':'uploadSuccess', //页面自行定制回调函数名
            'callbackId':1  //请求识别号，原生回调时会原路传回来
        });
    }

    //自定义的接受照片地址的函数
    function uploadSuccess(data) {
        var rs=JSON.parse(data);
        var callbackId=rs.callbackId;
        var photoUrl=rs.photoUrl;
        alert("请求"+callbackId+"回调，收到图片地址"+photoUrl);
    }


    //分享
    function share() {
        window.JJMWebViewJavascriptBridge.callNative({
            'action':'share',
            'type':'page',  //分享类型，page为网页，其它类型再说吧
            'title':'分享标题',
            'content': '分享内容',
            'url': "http://jinjimi.cn",
            'previewImageUrl': 'http://jijimi.cn/about_icon.png'   //预览图地址，客户端收到这个参数时，需要自行下载，不传时默认为APP图标
        });
    }

    
</script>
</body>
</html>